<template>
<div class="statistics-rule-wrap">
      <el-form class="m7-form form-div" :model="form" :rules="rules" ref="formRef" label-position="top" size="mini">
        <el-form-item label="录音方式" prop="recordAllInCall">
          <el-radio v-model="form.recordAllInCall" :label="false">通话录音</el-radio>
          <el-radio v-model="form.recordAllInCall" :label="true">全程录音</el-radio>
        </el-form-item>
        <el-form-item label="录音声道" prop="recordingChannel">
          <el-radio-group disabled v-model="form.recordingChannel">
            <el-radio  label="enableSingTrackSingFile">单声道单文件</el-radio>
            <el-radio  label="enableDualTrackRecordSingleFile">多声道单文件</el-radio>
            <el-radio  label="enableDualTrackRecord">多声道多文件</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="录音格式">
          <el-radio v-model="form.recordType" label="mp3">mp3</el-radio>
          <el-radio v-model="form.recordType" label="wav">wav</el-radio>
        </el-form-item>
        <el-form-item label="存储路径">
          <el-input style="width:400px" v-model="form.recordSavePath"></el-input>
        </el-form-item>
        <el-form-item   label="存储时长">
          <el-input style="width:400px" disabled v-model.number="form.recordSaveDuration">
            <template slot="append">月</template>
          </el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="updateModel">确 定</el-button>
</div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { commonAction } from '@/utils/common';
import { urlValidate } from '@/utils/validate'
@Component({
  name: 'RecordingConfiguration',
  components: {}
})
export default class extends Vue {
  private $message: any
  private form: any = {
    enableSingTrackSingFile: true,
    enableDualTrackRecordSingleFile: false,
    enableDualTrackRecord: false,
    recordSaveDuration: '',
    recordSavePath: '',
    recordType: '',
    recordingChannel: '',
    recordAllInCall: false
  }

  private getModel () {
    commonAction({ url: '/call/action/config/recording', method: 'get' }).then(res => {
      if (res.success && res.data) {
        this.form = res.data
        if (res.data.enableSingTrackSingFile) {
          this.form.recordingChannel = 'enableSingTrackSingFile'
        } else if (res.data.enableDualTrackRecordSingleFile) {
          this.form.recordingChannel = 'enableDualTrackRecordSingleFile'
        } else {
          this.form.recordingChannel = 'enableDualTrackRecord'
        }
      }
    })
  }

  private updateModel () {
    if (this.form.recordSavePath && !urlValidate(this.form.recordSavePath)) {
      this.$message.error('请输入正确地址')
      return
    }
    let {
      enableSingTrackSingFile, enableDualTrackRecordSingleFile, enableDualTrackRecord, recordSaveDuration,
      recordSavePath, recordType, recordAllInCall
    } = this.form
    recordSaveDuration = Number(recordSaveDuration)
    const data = {
      enableSingTrackSingFile,
      enableDualTrackRecordSingleFile,
      enableDualTrackRecord,
      recordSaveDuration,
      recordSavePath,
      recordType,
      recordAllInCall
    }
    commonAction({ url: '/call/action/config/recording', method: 'post', data }).then(res => {
      if (res.success) {
        this.$message.success('保存成功')
      }
    })
  }

  private close () {
    this.form.enableSingTrackSingFile = false
    this.form.enableDualTrackRecordSingleFile = false
    this.form.enableDualTrackRecord = false
  }

  private created () {
    this.getModel()
  }
}
</script>

<style lang="stylus" scoped>
.statistics-rule-wrap
  border 1px solid $border-main
  box-shadow 0px 0px 4px 0px #e0e6f0, 0px 1px 4px 0px #e0e6f0
  border-radius 10px
  overflow hidden
  padding 24px
  border-radius 10px
  height calc(100% - 40px)
  overflow auto
  box-sizing border-box
.wid200
  width: 200px
</style>
